<template>
  <div class="attendanceHeader">
    <el-menu
        default-active="attendance"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#4180B1"
        text-color="#fff"
        active-background-color="#FF9933"
        :router="false"
        @select="handleSelect"
      >
        <el-menu-item index="Home">首页</el-menu-item>
        <el-menu-item index="System">系统配置</el-menu-item>
        <el-menu-item index="attendance">考勤管理</el-menu-item>
      </el-menu>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState({
      CURRENT_NAV: (state) => state.routes_source.CURRENT_NAV,
      routesSource: (state) => state.routes_source.ROUTES,
    }),
  },
  mounted() {
    this.handleSelect('attendance')
  },
  methods: {
    ...mapMutations("routes_source", ["SET_ROUTES_CHILDREN"]),
    // 顶部选择
    handleSelect(key, keyPath) {
      const curData = this.routesSource.filter((f) => f.name === key);
      if (curData.length > 0) {
        this.SET_ROUTES_CHILDREN(curData[0].children);
        if (curData[0].redirect !== "noRedirect") {
          this.$router.push({ path: curData[0].path }).catch(() => {});
        }
      } else {
        this.SET_ROUTES_CHILDREN([]);
        this.$router.push({ path: "/" }).catch(() => {});
      }
    },
  },
};
</script>

<style lang='scss'>
.attendanceHeader {
    .el-menu {
      padding-left: 250px;
      border-bottom: none !important;
      .el-menu-item {
        padding: 0 5vw;
      }
      .el-menu-item.is-active {
        color: #333;
        background: #f0f0f0 !important;
      }
    }

}
</style>